<template>
  <div class="swipeAble">
    <van-tabs swipeable>
      <van-tab v-for="(item, index) in list" :title="item">
        <div class="swipeContent">
          <div v-show="index === 0">
            <HotCar />
            <van-divider>你可能会喜欢</van-divider>
            <Lists />
          </div>
          <div v-show="index !== 0" class="uncultivated">组件暂未开发~</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script >
import Lists from "@/components/list.vue";
import { ref } from "@vue/reactivity";
import HotCar from "@/components/hotCar.vue";
export default {
  name: "swipeAble",
  setup() {
    const list = ref([
      "推荐",
      "直播",
      "新车",
      "原创",
      "玩车",
      "导购",
      "行业",
      "推荐",
      "节目",
      "SUV",
    ]);
    return {
      list,
    };
  },
  components: {
    Lists,
    HotCar,
  },
};
</script>

<style lang="less" scoped>
.swipeAble {
  padding-top: 40px;
}
.swipeContent {
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
  .uncultivated {
    margin: 0 auto;
    padding: 50px 0;
    min-height: 200px;
    text-align: center;
  }
}
</style>